<template>
	<view class="content" style="padding-top:10rpx;">
		<view class="" v-if="list.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
			<image  src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
			暂无数据
		</view>
		<view v-else class="">
			<u-swipe-action  :show="item.show" :index="index" v-for="(item, index) in list" btn-width="160" :key="item.conversationID" @click="click" @open="open" :options="options">
				<view class="item" :class="item.isTop ? 'bg_view' : ''" hover-class="message-hover-class" @tap="linkTo(item)">
					<image mode="aspectFill" :src="$jiekou.uploadBaseUrl+item.userProfile.avatar" />
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="right u-border-bottom title-wrap">
						<view class="right_top">
							<view class="right_top_name u-line-1">{{ item.userProfile.nick }}</view>
							<view class="right_top_time ">{{ item.lastMessage.lastTime | humanize() }}</view>
						</view>
						<view class="right_btm ">
							<view class="u-line-1">{{ item.lastMessage.messageForShow=="[自定义消息]"?"[位置]":item.lastMessage.messageForShow }}</view>
							<view class=""></view>
						</view>
					</view>
				</view>
			</u-swipe-action>
		</view>
		
	</view>
</template>

<script>
import searchInput from '@/components/searchInput/index.vue';
import selectInput from '@/components/selectInput/selectInput.vue';
import util from '@/common/util.js';
export default {
	components: { searchInput, selectInput },
	data() {
		return {
			list: [
				
				
			],
			selectShow: false,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						fontSize: '24rpx'
					}
				}
			],
			selectList: [{ id: '1', name: '添加朋友', icon: 'man-add-fill' }, { id: '2', name: '扫一扫', icon: 'scan' }, { id: '3', name: '收付款', icon: 'fingerprint' }]
		};
	},
	onLoad(){
		
	},
	onShow:function(){
		var that = this;
		// 拉取会话列表
		let promise = this.tim.getConversationList();
		// console.log(this.tim);
		promise.then(function(imResponse) {
		  const conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表11
		  that.list = conversationList;
		  console.log("会话列表");
		  console.log(conversationList);
		}).catch(function(imError) {
		  console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
		});
	},
	methods: {
		//打开或者关闭弹窗
		showSelect(){
			this.selectShow = !this.selectShow;
		},
		//action 点击事件
		click(index, index1) {
			if (index1 == 0) {
				console.log(this.list[index]);
				var that = this;
				let promise = this.tim.deleteConversation(this.list[index].conversationID);
				promise.then(function(imResponse) {
				  //删除成功。
				  that.list.splice(index, 1);
				}).catch(function(imError) {
				  console.warn('deleteConversation error:', imError); // 删除会话失败的相关信息
				});
			} 
		},
		//action 打开事件
		open(index) {
			this.list[index].show = true;
			this.list.map((val, idx) => {
				if (index != idx) this.list[idx].show = false;
			});
		},
		//点击导航栏自定义按钮
		onNavigationBarButtonTap({ index }) {
			if (index == 0) {
				this.showSelect()
			}
		},
		//跳转
		linkTo(tim) {
			uni.setStorageSync("meHead",this.$jiekou.uploadBaseUrl+tim.userProfile.avatar);
			// this.$u.route({
			// 	url: 'pages/chat/chat',
			// 	params: { 
			// 		messageId: tim.conversationID,
			// 		// meHead:tim.userProfile.avatar,
			// 		meUserID:tim.userProfile.userID,
			// 	}
			// });
			this.$store.commit('createConversationActive', tim.userProfile.userID)
			uni.navigateTo({
				url: '../chat/chat'
			})
		},
		//选择用户聊天
		checkUserToRoom(toUserInfo) {
			this.$store.commit('createConversationActive', toUserInfo.userId)
			uni.navigateTo({
				url: './room'
			})
		},
		//关闭弹窗
		closeSelect(){
			//小程序兼容
			this.selectShow = false;
		},
		//扫码
		checkSelect(index) {
			if (index == 1) {
				uni.vibrateLong();
				//扫码
				uni.scanCode({
					success: function(res) {
						// console.log('条码内1容：' + res.result);
						this.$u.toast('条码类型:', res.scanType);
					}
				});
			}
		},
	},
	filters:{
		humanize:(date)=>{
			return util.dateUtils.humanize(date);
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.item {
		width: 750rpx;
		display: flex;
		align-items: center;
		// padding: 20rpx;
		image {
			width: 76rpx;
			height: 76rpx;
			margin: 20rpx;
			border-radius: 12rpx;
			flex: 0 0 76rpx;
		}
		.right {
			overflow: hidden;
			flex: 1 0;
			padding: 20rpx 20rpx 20rpx 0;
			&_top {
				display: flex;
				justify-content: space-between;
				&_name {
					font-size: 28rpx;
					color: $u-main-color;
					flex: 0 0 450rpx;
					overflow: hidden;
				}
				&_time {
					font-size: 22rpx;
					color: $u-light-color;
				}
			}
			&_btm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 22rpx;
				color: $u-tips-color;
				padding-top: 10rpx;
			}
		}
	}
	.bg_view {
		background-color: #fafafa;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx; 
	}
}
</style>
